<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选</title>
    <script src="jquery.min.js"></script>
    <style>
        input{
            display: block;
        }
    </style>
</head>
<body>
    <!-- 全选操作：在购物车勾选商品时，实现点击全选按钮，商品的小圆点也全部选中，   -->
    <div class="box">
        全选：<input type="checkbox" class="checkall"><br>
        <input type="checkbox" class="j-checkbox">
        <input type="checkbox" class="j-checkbox">
        <input type="checkbox" class="j-checkbox">
        <input type="checkbox" class="j-checkbox"><br>
        全选：<input type="checkbox" class="checkall">
    </div>

    <script>
        $(function(){
            // 当点击任意一个全选控件时，所有的商品控件和另外一个全选控件都会被选中[思路：把全选控件的的checked属性状态赋值给商品控件，事件使用change() ]
            // 只要全选控件发生变化，就执行change函数  小控件的checked属性是根据全选控件的变化而变化的
            $('.checkall').change(function(){
                var n = $(this).prop('checked');// 获取到全选控件的checked属性的状态
                $('.j-checkbox,.checkall').prop('checked',n);// prop('属性')表示获取属性值；prop('属性',值);表示设置某个属性的值
            });

            // 当商品控件全部被选中时，全选控件也要被勾选上。【思路：当商品控件被勾选的次数为4时，全选控件就能被选中
            

            // 商品控件的属性值每次发生变化都执行函数
            $('.j-checkbox').change(function(){
                // if(被选中的商品控件的个数===4){
                //     // 就要选中全选控件
                // }else{
                //     // 不选中全选控件
                // }
                // 表示获取到被选中的商品控件
                var i = $('.j-checkbox:checked');
                console.log($('.j-checkbox:checked'));// :checked选择器，查找被选中的控件
                // ==判断值是否相等，===除了判断值是否相等还要判断数据类型是否一样
                if(i.length===4){
                    $('.checkall').prop('checked','checked');
                }else{
                    // 否则就是商品控件没有被全选，全选控件可以不做处理
                }
            });
        })
    </script>
</body>
</html>